<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<script src="../assets/js/jquery.min.js"></script>-->
    <title>hhhhhhhhhhhhhhhhhhhh</title>
</head>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
<style>
    div {
        position: absolute;
        top: 35%;
        left: 50%;
        height: 800px;
        width: 800px;
        margin: -15% 0 0 -25%;
        background-color: #6fc3df;
    }
</style>

<body>
<input type="button" value="GO" onclick="run()">
<div id = sum>
    <canvas id="drawing" width=" 800" height="800" onclick="getMousePos()">A drawing of something.</canvas>
</div>



</body >
<script>
    const BHAW = 800;
    const HAW = 720;//正方形的边长
    const lineNum = 10;
    const banJin = 25;
    var clickXY = {//鼠标当前点击xy
        x:'',
        y:''
    }
    var clickQi = {//鼠标当前点击xy
        x:0,
        y:0
    }
    var sum = new Array(lineNum);//所有交叉点的二维数组
    var context;
    var drawing = document.getElementById("drawing");
    if (drawing.getContext) {
         context = drawing.getContext("2d");
    }
    drawing.addEventListener('click', function(e) {//获取鼠标点击位置
        // debugger
        clickXY.x = e.offsetX;
        clickXY.y = e.offsetY;
             // alert('offsetX:' + e.offsetX + ',offsetY:' + e.offsetY);
        clickWhitch(clickXY);
    })
    //判断鼠标点的是哪个棋子
    function clickWhitch(clickXY) {
        if(clickXY.x && clickXY.y){
            sum.forEach(s=>{
                if(s[0].x-banJin <= clickXY.x && s[0].x + banJin >=  clickXY.x){
                    clickQi.x = s[0].x
                    var cx = s
                    cx.forEach(sm=>{
                        if(sm.y-banJin <= clickXY.y && sm.y+banJin >= clickXY.y){
                            clickQi.y = sm.y
                        }
                    })
                }
            })
            if(clickQi.x != 0 && clickQi.y != 0){
                context.moveTo(clickQi.x, clickQi.y);
                context.arc(clickQi.x, clickQi.y,banJin,0,2*Math.PI);
                PCxia();
                // context.stroke();
                // clickQi.x = 0;
                // clickQi.y = 0;
            }

        }
    }

    function PCxia() {
        $.ajax({
            type:"POST",
            url:"pc/xiaQi",
            dataType:'json',
            data:{
                /*x:clickQi.x,
                y:clickQi.y,*/
                clickQi:JSON.stringify(clickQi),
                sum: JSON.stringify(sum),
                banJin: banJin

            },
            success:function(){
            }
        });

    }

    function run() {
        context.lineWidth=1;
        allPsb(lineNum,HAW);
        qiPu(sum);
        context.stroke();
        // allQi();

    }

    //所有交叉点
    function allPsb(lineNum,HAW) {
//        debugger;
        var everyPx = HAW/(lineNum-1)
        for(var i = 0; i < lineNum; i++){
            var arr = new Array(lineNum);
            for(var j = 0; j < lineNum; j++){
                arr[j] ={
                    x:i * everyPx + (BHAW - HAW)/2,
                    y:j * everyPx + (BHAW - HAW)/2
                }
            }
            sum[i] = arr;
        }

    // sum.map(s=>{
    //     s.map(sm=>{
    //         alert(sm.x+ '  ' + sm.y)
    //     })
    // })
    }

    function qiPu(sum) {
        for (var i = 0; i < sum.length; i++){
            var sumSm = sum[0]
            var sumBig = sum[sum.length-1];
            //起点
            begX = sumSm[i].x;
            begY = sumSm[i].y;
            //终点
            endX = sumBig[i].x;
            endY = sumBig[i].y;
            dLine({x:begX,y:begY},{x:endX,y:endY});
            dLine({x:begY,y:begX},{x:endY,y:endX});
        }
    }
    //划线
    function dLine(pxMapBeg,pxMapEnd) {
        // alert('移动到: '+ pxMapBeg.x + ' , ' + pxMapBeg.y
        //         + '画到' + pxMapEnd.x + ' , ' + pxMapEnd.y)
        context.moveTo(pxMapBeg.x, pxMapBeg.y);
        context.lineTo(pxMapEnd.x, pxMapEnd.y);
        // context.stroke();
    }
    //初始化所有棋子
    function allQi() {
        // context.moveTo(sum[0][0].x,sum[0][0].y);
        // context.arc((sum[0])[0].x,(sum[0])[0].y,25,0,2*Math.PI);
        sum.map(function (outArr) {
            outArr.map(function (inArr) {
                context.moveTo(inArr.x, inArr.y);
                context.arc(inArr.x, inArr.y,25,0,2*Math.PI);
            })

        })


    }





</script>

</html>